<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票查询</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f7;
            overflow-x: hidden;
        }
        
        /* iOS状态栏 */
        .status-bar {
            height: 44px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 15px;
            font-weight: 500;
        }
        
        .status-bar-left {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .status-bar-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 导航栏 */
        .nav-bar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 15px 20px 20px;
            color: white;
        }
        
        .nav-title {
            font-size: 28px;
            font-weight: 700;
            text-align: center;
        }
        
        /* 内容区域 */
        .content {
            padding: 12px;
            padding-bottom: 100px;
        }
        
        /* 搜索卡片 */
        .search-card {
            background: white;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            margin-bottom: 12px;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        .form-label {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
            display: block;
        }
        
        .input-wrapper {
            position: relative;
        }
        
        .form-input, .form-select {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 15px;
            transition: all 0.3s;
            background: #f9fafb;
        }
        
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #667eea;
            background: white;
        }
        
        .autocomplete-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 2px solid #e5e7eb;
            border-top: none;
            border-radius: 0 0 12px 12px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .autocomplete-item {
            padding: 10px 12px;
            cursor: pointer;
            border-bottom: 1px solid #f3f4f6;
            transition: background 0.2s;
        }
        
        .autocomplete-item:hover {
            background: #f9fafb;
        }
        
        .autocomplete-item:last-child {
            border-bottom: none;
        }
        
        .stock-code {
            color: #667eea;
            font-weight: 600;
        }
        
        .stock-name {
            color: #6b7280;
            font-size: 14px;
        }
        
        .btn-primary {
            width: 100%;
            padding: 11px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn-primary:active {
            transform: translateY(1px);
        }
        
        .btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* Tab切换 */
        .tab-container {
            background: white;
            border-radius: 16px;
            padding: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            margin-bottom: 12px;
        }
        
        .tabs {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
        }
        
        .tab {
            padding: 8px 4px;
            border-radius: 8px;
            background: #f3f4f6;
            color: #6b7280;
            border: none;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.3s;
            text-align: center;
        }
        
        .tab.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
        }
        
        /* 时间选择器 */
        .time-selector {
            background: white;
            border-radius: 16px;
            padding: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            margin-bottom: 12px;
        }
        
        .time-label {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
        }
        
        .time-select-btn {
            width: 100%;
            padding: 10px 12px;
            background: #f9fafb;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 15px;
            color: #333;
            text-align: left;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .time-select-btn:active {
            border-color: #667eea;
            background: white;
        }
        
        /* iOS风格选择器弹窗 */
        .picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1000;
            display: none;
            animation: fadeIn 0.3s;
        }
        
        .picker-overlay.show {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        
        .picker-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-radius: 20px 20px 0 0;
            z-index: 1001;
            animation: slideUp 0.3s;
        }
        
        .picker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .picker-cancel, .picker-confirm {
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
            padding: 5px 10px;
        }
        
        .picker-cancel {
            color: #6b7280;
        }
        
        .picker-confirm {
            color: #667eea;
            font-weight: 600;
        }
        
        .picker-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .picker-content {
            height: 250px;
            overflow-y: auto;
            padding: 10px 0;
        }
        
        .picker-item {
            padding: 12px 20px;
            font-size: 16px;
            color: #333;
            text-align: center;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .picker-item:hover {
            background: #f9fafb;
        }
        
        .picker-item.selected {
            background: #667eea;
            color: white;
            font-weight: 600;
        }
        
        /* K线图卡片 */
        .chart-card {
            background: white;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            margin-bottom: 12px;
        }
        
        .chart-header {
            margin-bottom: 12px;
        }
        
        .stock-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .stock-title {
            font-size: 16px;
            font-weight: 700;
            color: #333;
        }
        
        .stock-price {
            font-size: 20px;
            font-weight: 700;
            color: #ef4444;
        }
        
        .stock-change {
            font-size: 13px;
            color: #ef4444;
        }
        
        .stock-change.positive {
            color: #ef4444;
        }
        
        .stock-change.negative {
            color: #10b981;
        }
        
        .chart-container {
            height: 250px;
            position: relative;
        }
        
        /* 数据指标 */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 12px;
        }
        
        .metric-item {
            background: #f9fafb;
            padding: 8px;
            border-radius: 10px;
        }
        
        .metric-label {
            font-size: 11px;
            color: #6b7280;
            margin-bottom: 3px;
        }
        
        .metric-value {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        
        /* 底部TabBar */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0 25px;
            border-top: 1px solid #e5e7eb;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        
        .tab-bar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #9ca3af;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .tab-bar-item.active {
            color: #667eea;
        }
        
        .tab-bar-icon {
            font-size: 24px;
        }
        
        .tab-bar-label {
            font-size: 11px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- iOS状态栏 -->
    <div class="status-bar">
        <div class="status-bar-left">
            <span>9:41</span>
        </div>
        <div class="status-bar-right">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-three-quarters"></i>
        </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
        <div class="nav-title">📈 股票K线分析</div>
    </div>
    
    <!-- 主内容 -->
    <div class="content">
        <!-- 搜索表单 -->
        <div class="search-card">
            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-search"></i> 股票代码/名称
                </label>
                <div class="input-wrapper">
                    <input 
                        type="text" 
                        class="form-input" 
                        placeholder="请输入股票代码或名称，如：600519"
                        value="sh600519"
                    >
                    <!-- 自动完成列表示例 -->
                    <div class="autocomplete-list" style="display: none;">
                        <div class="autocomplete-item">
                            <div class="stock-code">sh600519</div>
                            <div class="stock-name">贵州茅台</div>
                        </div>
                        <div class="autocomplete-item">
                            <div class="stock-code">sh600518</div>
                            <div class="stock-name">康美药业</div>
                        </div>
                        <div class="autocomplete-item">
                            <div class="stock-code">sh600516</div>
                            <div class="stock-name">方大炭素</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-chart-line"></i> 复权方式
                </label>
                <select class="form-select">
                    <option>不复权</option>
                    <option>前复权</option>
                    <option>后复权</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-list-ol"></i> 数据长度
                </label>
                <input 
                    type="number" 
                    class="form-input" 
                    placeholder="1-1023之间" 
                    value="36"
                    min="1"
                    max="1023"
                >
            </div>
            
            <button class="btn-primary">
                <i class="fas fa-search"></i> 查询K线
            </button>
        </div>
        
        <!-- K线周期Tab -->
        <div class="tab-container">
            <div class="tabs">
                <button class="tab">5分</button>
                <button class="tab">15分</button>
                <button class="tab">30分</button>
                <button class="tab active">60分</button>
                <button class="tab">日K</button>
                <button class="tab">周K</button>
                <button class="tab">月K</button>
            </div>
        </div>
        
        <!-- 时间选择器 -->
        <div class="time-selector">
            <div class="time-label">
                <i class="fas fa-clock"></i> 选择时间段
            </div>
            <button class="time-select-btn" id="timeSelectBtn">
                <span id="selectedTime">09/30 15:00</span>
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
        
        <!-- 时间选择弹窗 -->
        <div class="picker-overlay" id="pickerOverlay">
            <div class="picker-container">
                <div class="picker-header">
                    <button class="picker-cancel" id="pickerCancel">取消</button>
                    <div class="picker-title">选择时间</div>
                    <button class="picker-confirm" id="pickerConfirm">确定</button>
                </div>
                <div class="picker-content" id="pickerContent">
                    <div class="picker-item" data-time="09/19 14:00">09/19 14:00</div>
                    <div class="picker-item" data-time="09/19 15:00">09/19 15:00</div>
                    <div class="picker-item" data-time="09/22 10:30">09/22 10:30</div>
                    <div class="picker-item" data-time="09/22 11:30">09/22 11:30</div>
                    <div class="picker-item" data-time="09/22 14:00">09/22 14:00</div>
                    <div class="picker-item" data-time="09/22 15:00">09/22 15:00</div>
                    <div class="picker-item" data-time="09/23 10:30">09/23 10:30</div>
                    <div class="picker-item" data-time="09/23 11:30">09/23 11:30</div>
                    <div class="picker-item" data-time="09/23 14:00">09/23 14:00</div>
                    <div class="picker-item" data-time="09/23 15:00">09/23 15:00</div>
                    <div class="picker-item" data-time="09/24 10:30">09/24 10:30</div>
                    <div class="picker-item" data-time="09/24 11:30">09/24 11:30</div>
                    <div class="picker-item" data-time="09/24 14:00">09/24 14:00</div>
                    <div class="picker-item" data-time="09/24 15:00">09/24 15:00</div>
                    <div class="picker-item" data-time="09/25 10:30">09/25 10:30</div>
                    <div class="picker-item" data-time="09/25 11:30">09/25 11:30</div>
                    <div class="picker-item" data-time="09/25 14:00">09/25 14:00</div>
                    <div class="picker-item" data-time="09/25 15:00">09/25 15:00</div>
                    <div class="picker-item selected" data-time="09/30 15:00">09/30 15:00</div>
                </div>
            </div>
        </div>
        
        <!-- K线图展示 -->
        <div class="chart-card">
            <div class="chart-header">
                <div class="stock-info">
                    <div>
                        <div class="stock-title">贵州茅台 (sh600519)</div>
                    </div>
                    <div style="text-align: right;">
                        <div class="stock-price">¥1,650.50</div>
                        <div class="stock-change positive">
                            <i class="fas fa-arrow-up"></i> +25.80 (+1.59%)
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="chart-container">
                <canvas id="klineChart"></canvas>
            </div>
            
            <!-- 数据指标 -->
            <div class="metrics-grid">
                <div class="metric-item">
                    <div class="metric-label">开盘</div>
                    <div class="metric-value">1,638.00</div>
                </div>
                <div class="metric-item">
                    <div class="metric-label">收盘</div>
                    <div class="metric-value">1,650.50</div>
                </div>
                <div class="metric-item">
                    <div class="metric-label">最高</div>
                    <div class="metric-value" style="color: #ef4444;">1,665.20</div>
                </div>
                <div class="metric-item">
                    <div class="metric-label">最低</div>
                    <div class="metric-value" style="color: #10b981;">1,635.80</div>
                </div>
                <div class="metric-item">
                    <div class="metric-label">成交量</div>
                    <div class="metric-value">123.45万</div>
                </div>
                <div class="metric-item">
                    <div class="metric-label">成交额</div>
                    <div class="metric-value">20.38亿</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部TabBar -->
    <div class="tab-bar">
        <a href="#" class="tab-bar-item active">
            <i class="fas fa-home tab-bar-icon"></i>
            <span class="tab-bar-label">查询</span>
        </a>
        <a href="#" class="tab-bar-item">
            <i class="fas fa-history tab-bar-icon"></i>
            <span class="tab-bar-label">历史</span>
        </a>
    </div>
    
    <script>
        // 初始化K线图
        const ctx = document.getElementById('klineChart').getContext('2d');
        
        // 模拟K线数据
        const klineData = [
            { time: '09:30', open: 1640, close: 1645, high: 1648, low: 1638 },
            { time: '10:30', open: 1645, close: 1642, high: 1650, low: 1640 },
            { time: '11:30', open: 1642, close: 1648, high: 1652, low: 1641 },
            { time: '13:00', open: 1648, close: 1644, high: 1650, low: 1642 },
            { time: '14:00', open: 1644, close: 1650, high: 1655, low: 1643 },
            { time: '15:00', open: 1650, close: 1650.5, high: 1665, low: 1648 },
        ];
        
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: klineData.map(d => d.time),
                datasets: [{
                    label: '收盘价',
                    data: klineData.map(d => d.close),
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 4,
                    pointBackgroundColor: '#667eea',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointHoverRadius: 6,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        borderColor: '#667eea',
                        borderWidth: 1,
                        padding: 12,
                        displayColors: false,
                        callbacks: {
                            title: function(context) {
                                return '时间: ' + context[0].label;
                            },
                            label: function(context) {
                                const dataPoint = klineData[context.dataIndex];
                                return [
                                    '开盘: ¥' + dataPoint.open,
                                    '收盘: ¥' + dataPoint.close,
                                    '最高: ¥' + dataPoint.high,
                                    '最低: ¥' + dataPoint.low
                                ];
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        grid: {
                            color: '#f3f4f6'
                        },
                        ticks: {
                            callback: function(value) {
                                return '¥' + value;
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
        
        // Tab切换效果
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 时间选择器逻辑
        const timeSelectBtn = document.getElementById('timeSelectBtn');
        const pickerOverlay = document.getElementById('pickerOverlay');
        const pickerCancel = document.getElementById('pickerCancel');
        const pickerConfirm = document.getElementById('pickerConfirm');
        const selectedTimeDisplay = document.getElementById('selectedTime');
        const pickerItems = document.querySelectorAll('.picker-item');
        
        let tempSelectedTime = '09/30 15:00';
        
        // 打开选择器
        timeSelectBtn.addEventListener('click', function() {
            pickerOverlay.classList.add('show');
            document.body.style.overflow = 'hidden';
        });
        
        // 关闭选择器
        function closePicker() {
            pickerOverlay.classList.remove('show');
            document.body.style.overflow = 'auto';
        }
        
        // 点击遮罩关闭
        pickerOverlay.addEventListener('click', function(e) {
            if (e.target === pickerOverlay) {
                closePicker();
            }
        });
        
        // 取消按钮
        pickerCancel.addEventListener('click', closePicker);
        
        // 确定按钮
        pickerConfirm.addEventListener('click', function() {
            selectedTimeDisplay.textContent = tempSelectedTime;
            closePicker();
        });
        
        // 选择时间项
        pickerItems.forEach(item => {
            item.addEventListener('click', function() {
                pickerItems.forEach(i => i.classList.remove('selected'));
                this.classList.add('selected');
                tempSelectedTime = this.getAttribute('data-time');
                
                // 滚动到选中项
                this.scrollIntoView({ behavior: 'smooth', block: 'center' });
            });
        });
    </script>
</body>
</html>

